<link rel="stylesheet" href="lib/ztree/zTreeStyle/zTreeStyle.css" type="text/css">
<style type="text/css">
    .form-box {
        padding: 20px 20px 0 0;
    }
</style>
<div id="layui-container" class="layui-anim layui-anim-downbit">
    <!--<form class="layui-form" lay-filter="dicTypeForm">
        <div class="layui-form-item">
            <label class="layui-form-label">字典类型</label>
            <div class="layui-input-inline">
                <select id="dicType" name="dicType" lay-search lay-filter="dicType">
                    <option value=""></option>
                </select>
            </div>
        </div>
    </form>-->
    <table class="layui-hide" id="test" lay-filter="test"></table>
</div>
<script id="item-form" type="text/html">
    <div class="form-box">
        <form id="form-item" lay-filter="formItem" class="layui-form">
            <input type="hidden" name="id" value="{{ d.id || '' }}"/>
            <input type="hidden" name="typeId" value="1474210354490920960"/>
            <div class="layui-form-item">
                <label class="layui-form-label required">字典项：</label>
                <div class="layui-input-block">
                    <input type="text" name="dicValue" lay-verify="required" placeholder="字典项"
                           class="layui-input" value="{{ d.dicValue || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label required">字典值：</label>
                <div class="layui-input-block">
                    <input type="text" name="dicLabel" lay-verify="required" placeholder="字典值"
                           class="layui-input" value="{{ d.dicLabel || '' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">排序号：</label>
                <div class="layui-input-block">
                    <input type="text" name="sort" placeholder="排序号"
                           class="layui-input" value="{{ d.sort || '1' }}"/>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">描述</label>
                <div class="layui-input-block">
                    <textarea name="note" placeholder="请输入描述"
                              class="layui-textarea">{{ d.note || '' }}</textarea>
                </div>
            </div>
        </form>
    </div>
</script>
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="openDialog">添加</button>
        <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="deleteItems">删除</button>
    </div>
</script>
<script type="text/html" id="tableBar">
    <a class="layui-btn layui-btn-xs layui-btn-primary" lay-event="relateConsole">关联操作项</a>
    <a class="layui-btn layui-btn-xs" lay-event="openDialog">修改</a>
    <a class="layui-btn layui-btn-xs layui-btn-danger" lay-event="deleteItems">删除</a>
</script>
<script id="itemStatusForm" type="text/html">
    <div class="form-box p-l-15">
        <div class="layui-form-item">
            <ul id="item-status-tree" class="ztree"></ul>
        </div>
    </div>
</script>
<script type="text/javascript" src="lib/jquery/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="lib/ztree/jquery.ztree.all.min.js"></script>
<script type="text/javascript">
    layui.use(['form', 'table', 'laytpl'], function () {
        let form = layui.form;
        let table = layui.table;
        let laytpl = layui.laytpl;

        let flag = false;

        let tableIns = table.render({
            elem: '#test',
            url: api.baseDictionaryData,
            method: 'post',
            contentType: 'application/json',
            //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            cellMinWidth: 80,
            page: true,
            limit: 20,
            limits: [20, 40, 80],
            cols: [[
                {type: "checkbox", width: 50},
                {field: '', title: '序号', type: 'numbers'},
                {field: 'id', title: 'ID'},
                {field: 'dicValue', title: '字典项'},
                {field: 'dicKey', title: '字典值'},
                {field: 'typeId', title: '数据类型ID', hide: true},
                {field: 'note', title: '描述', width: 200},
                {field: 'deleteFlag', title: '启用标志', width: 100},
                {field: 'sort', title: '排序号', width: 100},
                {title: '操作', templet: '#tableBar', width: 200}
            ]],
            toolbar: '#toolbarDemo',
            defaultToolbar: false,
            where: {
                typeId: '1474210354490920960'
            },
            request: {
                pageName: "currentPage",
                limitName: "pageSize"
            }
            // response: {
            // statusName: 'status', //规定数据状态的字段名称，默认：code
            // statusCode: 200, //规定成功的状态码，默认：0
            // msgName: 'message', //规定状态信息的字段名称，默认：msg
            // countName: 'data.total', //规定数据总数的字段名称，默认：count
            // dataName: 'data.records' //规定数据列表的字段名称，默认：data
            // },
            // parseData: function (res) { //res 即为原始返回的数据
            //     return {
            //         "code": res.data.status, //解析接口状态
            //         "msg": res.message, //解析提示文本
            //         "count": res.data.total, //解析数据长度
            //         "data": res.data.records //解析数据列表
            //     };
            // }
        });

        let active = {
            loadTypes: function () {
                request.postAjax(api.baseDictionaryType, {}, function (res) {
                    let $dicType = $('#dicType');
                    $dicType.empty();
                    $dicType.append('<option value=""></option>');
                    for (var i = 0; i < res.data.length; i++) {
                        $dicType.append('<option value="' + res.data[i].id + '">' + res.data[i]
                            .dicValue + '</option>');
                    }
                    form.render('select', 'dicTypeForm');
                });
            },
            openDialog: function (data) {
                if (!data) {
                    data = {};
                }
                let tpl = document.getElementById("item-form").innerHTML;
                laytpl(tpl).render(data, function (html) {
                    layer.open({
                        type: 1,
                        content: html,
                        title: '字典信息',
                        area: ['435px', '420px'],
                        maxmin: false,
                        shade: 0.3,
                        btn: ['确定', '取消'],
                        yes: function (index, layero) {
                            request.bodyAjax(api.saveOrUpdate, form.val('formItem'), function (res) {
                                if (res.status === 200) {
                                    layer.close(index);
                                    tableIns.reload();
                                }
                                layer.msg(res.message);
                            });
                            return false;
                        }
                    });
                });
                return form.render();
            },
            deleteItems: function (data) {
                let ids = [];
                if (data && data.id) {
                    ids.push(data.id);
                } else {
                    let checkStatus = table.checkStatus('test');
                    data = checkStatus.data;
                    for (let i = 0; i < data.length; i++) {
                        ids.push(data[i].id);
                    }
                }
                if (ids.length === 0) {
                    layer.msg("未选中任何数据", {icon: 2});
                    return;
                }
                layer.confirm('确定删除选中的' + ids.length + '条数据吗 ？', {
                    icon: 3,
                    // offset:['18%','34%'],
                    btn: ['确定', '取消'],
                    yes: function (index, layero) {
                        layer.close(index);
                        layer.msg('正在操作, 请稍后......', {shade: 0.01, time: 0});
                        request.bodyAjax(api.dicDelete, ids, function (res) {
                            if (res.status === 200) {
                                tableIns.reload();
                            }
                            layer.msg(res.message);
                        });
                    }
                });
            },
            relateConsole: function (data) {
                request.bodyAjax(api.itemChecked, {statusId: data.id}, function (res) {
                    if (res.status === 200) {
                        let tpl = document.getElementById("itemStatusForm").innerHTML;
                        laytpl(tpl).render({}, function (html) {
                            layer.open({
                                type: 1,
                                content: html,
                                title: '[<font color="blue">' + data.dicValue + '</font>]的权限',
                                area: ['300px', '750px'],
                                maxmin: false,
                                shade: 0.3,
                                btn: ['展开/折叠', '保存', '关闭'],
                                yes: function () {
                                    let treeObj = $.fn.zTree.getZTreeObj("item-status-tree");
                                    treeObj.expandAll(flag);
                                    flag = !flag;
                                },
                                btn2: function (index, layero) {
                                    let loadingIndex = layer.load();
                                    let treeObj = $.fn.zTree.getZTreeObj("item-status-tree");
                                    let nodes = treeObj.getCheckedNodes(true);
                                    let checkData = [];
                                    for (let i = 0; i < nodes.length; i++) {
                                        checkData.push(nodes[i].id);
                                    }
                                    let params = {statusId: data.id, itemIds: checkData};
                                    request.bodyAjax(api.updateRelation, params, function (res2) {
                                        if (res2.code === 200) {
                                            layer.close(index);
                                        } else {
                                            layer.msg(res2.message);
                                        }
                                        layer.close(loadingIndex);
                                    });
                                }
                            });
                            let setting = {
                                data: {
                                    key: {
                                        name: 'operaName'
                                    },
                                    simpleData: {
                                        enable: true,
                                        idKey: 'id',
                                        pIdKey: 'parentId'
                                    }
                                },
                                check: {
                                    enable: true,
                                    chkStyle: "checkbox",
                                    chkboxType: {"Y": "ps", "N": "s"}
                                },
                                callback: {
                                    beforeClick: function (treeId, treeNode) {
                                        var zTree = $.fn.zTree.getZTreeObj(treeId);
                                        if (treeNode.isParent) {
                                            zTree.expandNode(treeNode);
                                        }
                                        return true;
                                    }
                                }
                            };
                            $.fn.zTree.init($("#item-status-tree"), setting, res.data);
                            let treeObj = $.fn.zTree.getZTreeObj("item-status-tree");
                            treeObj.expandAll(true);
                        });
                        return;
                    }
                    layer.msg(res.message);
                });
            }
        };

        /*active.loadTypes();

        form.on('select(dicType)', function (data) {
            tableIns.reload({
                where: {
                    fDictionarytypeid: data.value
                }
            });
        });*/

        // 表头按钮的监听
        table.on('toolbar(test)', function (obj) {
            var checkStatus = table.checkStatus(obj.config.id);
            if (active[obj.event]) {
                active[obj.event](obj);
            }
        });

        // 表格管理操作列的点击
        table.on('tool(test)', function (obj) {
            let layEvent = obj.event;
            let action = active[layEvent];
            if (action) {
                action(obj.data);
            }
        });
    });
</script>
